/**
 2. 原生css变量的定义=》类似less/sass定义变量 =》不需要打包，浏览器默认支持
 语法：
 1. 定义：--css变量名:css变量值
 2. 使用：var(--css变量名)
 作用域：
 1. 局部变量 =》 .类名 {    }
 2. 全局变量 =》 :root {    }
*/
:root {
  /* 1. 全局变量 */
  --cp-font-red: red;
  --cp-div-bd: 5px solid rgb(255, 115, 0);
}

.cp-use {
  /* 2. 局部变量 */
  --cp-color-green: green;
  font-size: 20px;
  color: var(--cp-font-red);
  border: var(--cp-div-bd);
  background: var(--cp-color-green);
}

// 覆盖vant全局css变量 =》
// 说明：两个:root:root可以覆盖其它一个:root中定义的同名变量
:root:root {
  // 项目定义变量
  --cp-primary: #16c2a3;
  --cp-plain: #eaf8f6;
  --cp-orange: #fca21c;
  --cp-text1: #121826;
  --cp-text2: #3c3e42;
  --cp-text3: #6f6f6f;
  --cp-tag: #848484;
  --cp-dark: #979797;
  --cp-tip: #c3c3c5;
  --cp-disable: #d9dbde;
  --cp-line: #ededed;
  --cp-bg: #f6f7f9;
  --cp-price: #eb5757;
  // 覆盖vant主体色
  --van-primary-color: var(--cp-primary);
  // == vant组件变量 ==
  // 单元格上下间距
  --van-cell-vertical-padding: 14px;
  // 复选框大小
  --van-checkbox-size: 14px;
  // 默认按钮文字大小
  --van-button-normal-font-size: 16px;
}

// 全局样式
body {
  font-size: 14px;
  color: var(--cp-text1);
}

a {
  color: var(--cp-text2);
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol {
  margin: 0;
  padding: 0;
}

// 全局覆盖van-tab样式
.van-tabs {
  .van-tabs__nav {
    padding: 0 0 15px 0;
  }

  .van-tabs__line {
    width: 20px;
    background-color: var(--cp-primary);
  }

  .van-tab {
    padding: 0 15px;
  }
}